<template>
  <!-- 未登录先登录 -->
  <div class="login" v-if="!user.nick">
    <h3 class="a">请先登录哦，亲</h3>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
        <van-button round block type="primary" to="/register">
          未有账号？先注册
        </van-button>
      </div>
    </van-form>
  </div>
  <div id="content" v-else>
    <div class="head">
      <h2>个人中心</h2>
    </div>
    <div class="message">
      <van-image
        v-if="user.headerimg"
        :src="user.headerimg"
        type="contain"
        round
      ></van-image>
      <p>{{ user.nick }}</p>
    </div>
    <div class="gird">
      <van-grid>
        <van-grid-item icon="gold-coin-o" text="待付款" />
        <van-grid-item icon="send-gift-o" text="待收货" />
        <van-grid-item icon="chat-o" text="待评价" />
        <van-grid-item icon="exchange" text="退款/退货" />
      </van-grid>
    </div>
    <div class="cell">
      <van-cell-group>
        <van-cell icon="star-o" title="我的收藏" is-link />
        <router-link to="/address"
          ><van-cell icon="location-o" title="我的收货地址" is-link
        /></router-link>
        <router-link to="/cart"
          ><van-cell icon="shop-o" title="我的购物车" is-link
        /></router-link>
        <van-cell icon="setting" title="切换账号" is-link @click="showPopup" />
        <van-popup
          v-model:show="show"
          closeable
          close-icon="close"
          position="bottom"
          :style="{ height: '25%' }"
          >
          <router-link to="/login"><van-button type="warning" block round style="margin-top:45px">切换账号</van-button></router-link>
          <br><van-button type="danger" block round @click="outLogin" >退出登录</van-button>
        </van-popup>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { userLogin } from "@/hooks/login";
import { userStore } from "@/stores/user";
import { useRouter } from "vue-router";
import { ref } from "vue";

const { onSubmit, onClickLeft, username, password, user } = userLogin();
const router = useRouter();
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const  storage = ref(window.localStorage)
const outLogin = () => {
	// const  storage = ref(window.localStorage)
  // const user.nick = ref(user.value,nick)
  // console.log(storage.value);
  // console.log(storage.value.userKey);
  user.nick = ref(user.value.nick)
  storage.value.clear()
  user.value.nick = ''
	router.replace('/user')
} 


</script>

<style scoped lang="scss">

#content {
  .head {
    background-color: rgb(231, 222, 222);
    margin-top: -20px;
    height: 60px;
    h2 {
      text-align: center;
      line-height: 60px;
    }
  }
  .message {
    width: 100%;
    height: 100px;
    background-color: skyblue;

    .van-image {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: block;
      float: left;
      margin-top: 10px;
      margin-left: 20px;
    }
    p {
      float: left;
      margin-top: 40px;
      margin-left: 30px;
    }
  }

}

.login {
  margin-top: 100px;
  .van-button {
    margin-top: 30px;
  }
}
.a{
  margin-left: 30px;
}
</style> 
